<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <!-- 节点的优点 -->
    
    <ul>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
    </ul>
   
    <script>
        var ul = document.querySelector('ul');
        // 1. 子节点  childNodes 所有的子节点 包含 元素节点 文本节点等等
        // 注意这个是复数，获取父节点下面的所有的儿子
        // 多了5个文本节点怎么回事？  亲儿子
        // 我是li会不会被获取？？  不会  孙子
        // 获取所有的子节点包括换行
        // 空格对于我们来说没用
        // var arr = ul.childNodes
        // for(var i = 0; i< arr.length; i++){
        //     if (arr[i].nodeType === 1) {
        //         console.log(arr[i]);
        //     }
        // }
        // 出身不重要，这个虽然不是标准，但是浏览器都支持，所以用的比较多
        var chil = ul.children
        console.log(chil);
   
        // console.log(ul.childNodes[0].nodeType);
        // console.log(ul.childNodes[1].nodeType);
        // 2. children 获取所有的子元素节点 也是我们实际开发常用的
        // console.log(ul.children);
    </script>
</body>

</html>